<template>
  <div class="outer">
    <div class="count-group d-flex justify-content-between">
      <span class="count-span" v-for="(value, i) of arr" :key="i">
        <div class="label">字数</div>
        <div class="text">138,061</div>
      </span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [1, 2, 1, 1],
    };
  },
};
</script>
<style lang="scss">
.outer {
  width: 1200px;
  margin: 0 auto;}
.count-group {
  width: 810px;
  margin: 20px auto;
  .count-span {
    flex: 1;
    padding: 10px;
    margin-left: 10px;
    border-radius: 4px;
    background: #fff;
    text-align: center;
    line-height: 1;
    .label {
      margin-bottom: 2px;
      font-size: 12px;
    }
    .text {
      font-weight: bold;
      font-size: 14px;
    }
  }
}
</style>
